<template>
  <div class="container">
    <h1>餐具入库管理</h1>

    <el-button class="back-button" type="text" @click="goBack">
      <i class="el-icon-arrow-left"></i> 返回
    </el-button>

    <div class="content-wrapper">
      <div class="form-wrapper">
        <el-form :model="inboundForm" @submit.native.prevent="submitInboundForm" class="inbound-form">
          <el-form-item label="供应商" class="add">
            <el-input v-model="inboundForm.supplier"></el-input>
          </el-form-item>
          <el-form-item label="餐具编号" class="add">
            <el-input v-model="inboundForm.itemId"></el-input>
          </el-form-item>
          <el-form-item label="餐具数量" class="add">
            <el-input v-model="inboundForm.quantity" type="number"></el-input>
          </el-form-item>
          <el-form-item label="供应航空公司名称" class="add">
            <el-input v-model="inboundForm.airline"></el-input>
          </el-form-item>
          <el-form-item label="餐具规格" class="add">
            <el-input v-model="inboundForm.specification"></el-input>
          </el-form-item>
          <el-form-item label="入库日期" class="add">
            <el-date-picker v-model="inboundForm.date" type="date"></el-date-picker>
          </el-form-item>
          <div class="form-footer">
            <el-button type="primary" native-type="submit">入库</el-button>
          </div>
        </el-form>
      </div>

      <div class="table-wrapper">
        <el-table :data="filteredItems" class="inbound-table">
          <el-table-column prop="itemId" label="餐具编号"></el-table-column>
          <el-table-column prop="supplier" label="供应商"></el-table-column>
          <el-table-column prop="quantity" label="入库数量"></el-table-column>
          <el-table-column prop="airline" label="供应航空公司名称"></el-table-column>
          <el-table-column prop="specification" label="餐具规格"></el-table-column>
          <el-table-column prop="date" label="入库日期"></el-table-column>
        </el-table>
      </div>
      <div style="padding: 10px 0">
        <el-pagination

          :page-sizes="[5, 10, 15, 20]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="40">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        inboundItems: [],
        inboundForm: {
          itemId: '',
          supplier: '',
          quantity: 0,
          airline: '',
          specification: '',
          date:new Date(),
        },
        searchForm: {
          supplier: '',
          itemId: '',
        },
        isStockInsufficient: false,
      };
    },
    computed: {
      filteredItems() {
        const { supplier, itemId } = this.searchForm;
        return this.inboundItems.filter(item => {
          return (
            item.supplier.includes(supplier) &&
            item.itemId.includes(itemId)
          );
        });
      },
    },
    methods: {
      submitInboundForm() {
        this.inboundItems.push({
          itemId: this.inboundForm.itemId,
          supplier: this.inboundForm.supplier,
          quantity: this.inboundForm.quantity,
          airline: this.inboundForm.airline,
          specification: this.inboundForm.specification,
          date: this.inboundForm.date,
        });

        this.clearForm();
      },
      clearForm() {
        this.inboundForm.itemId = '';
        this.inboundForm.supplier = '';
        this.inboundForm.quantity = 0;
        this.inboundForm.airline = '';
        this.inboundForm.specification = '';
        this.inboundForm.date = new Date();
      },
      goBack() {
        // 执行退出登录的逻辑
        // 返回登录页
        this.$router.push('/Index');
      }
    },
  };
</script>

<style scoped>
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .back-button {
    margin-bottom: 20px;
  }

  .content-wrapper {
    width: 80%;
  }

  .form-wrapper {
    background-color: #f5f5f5;
    padding: 20px;
    margin-bottom: 20px;
  }

  .form-row {
    display: flex;
  }

  .form-col {
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .table-wrapper {
    background-color: #f5f5f5;
    padding: 20px;
  }
</style>
